<template>
  <header class="header">
    <div class="header-left">
      <!-- 系统Logo和标题 -->
      <img src="../assets/logo.png" alt="Logo" class="logo" />
      <h1>智能转诊系统</h1>
    </div>
    <nav class="header-nav">
      <!-- 导航链接 -->
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">智能诊断</a></li>
        <li><a href="#">转诊服务</a></li>
        <li><a href="#">健康档案</a></li>
        <li><a href="#">专家咨询</a></li>
        <li><a href="#" @click.prevent="emitQuickAppointment">快速预约</a></li>
      </ul>
    </nav>
    <div class="header-right">
      <!-- 用户信息和功能图标 -->
      <div class="user-info" @click="showProfileDialog">
        <img :src="userInfo.avatar || '../assets/user.jpg'" alt="User Avatar" class="avatar" />
        <span>{{ userInfo.name || '访客' }}</span>
      </div>
      <div class="icons">
        <img
            src="../assets/email.svg"
            alt="Messages"
            class="icon"
            @click="goToMailbox"
        />
        <img
            src="../assets/phone.svg"
            alt="Notifications"
            class="icon"
            @click="goToCellphone"
        />
      </div>
    </div>

    <!-- 个人设置详情弹出框 -->
    <el-dialog
        v-model="profileDialogVisible"
        title="个人设置"
        width="600px"
        :close-on-click-modal="false"
    >
      <div class="profile-dialog-content">
        <!-- 头像上传区域 -->
        <div class="avatar-upload">
          <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              :on-change="handleAvatarChange"
          >
            <img v-if="tempUserInfo.avatar" :src="tempUserInfo.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><User /></el-icon>
          </el-upload>
          <div class="upload-tip">点击上传新头像</div>
        </div>

        <!-- 基本信息表单 -->
        <el-form :model="tempUserInfo" label-width="80px">
          <el-form-item label="姓名">
            <el-input v-model="tempUserInfo.name" />
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="tempUserInfo.phone" />
          </el-form-item>
          <el-form-item label="健康评分">
            <el-rate v-model="tempUserInfo.healthScore" disabled />
          </el-form-item>
          <el-form-item label="中医体质">
            <el-tag>{{ tempUserInfo.tcmStatus || '未检测' }}</el-tag>
          </el-form-item>
          <el-form-item label="个人简介">
            <el-input v-model="tempUserInfo.bio" type="textarea" :rows="3" />
          </el-form-item>
        </el-form>
      </div>

      <template #footer>
        <el-button @click="profileDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveProfile">保存</el-button>
      </template>
    </el-dialog>
  </header>
</template>

<script setup>
import { ref, watch } from 'vue'
import { User } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import router from "../routers/router.js";

// 定义组件接收的属性
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({
      name: '默认用户',
      avatar: '',
      phone: '',
      healthScore: 0,
      tcmStatus: '',
      bio: ''
    })
  },

})

// 定义组件可以触发的事件
const emits = defineEmits(['go-to-profile', 'quick-appointment', 'update-user-info'])

// 跳转到邮箱页面
const goToMailbox = () => {
  router.push('/mailbox')
}

// 跳转到手机信息页面
const goToCellphone = () => {
  router.push('/cellphone')
}

// 个人设置对话框状态
const profileDialogVisible = ref(false)
const tempUserInfo = ref({})

// 显示个人设置对话框
const showProfileDialog = () => {
  // 复制用户信息到临时对象
  tempUserInfo.value = { ...props.userInfo }
  profileDialogVisible.value = true
}

// 处理头像更改
const handleAvatarChange = (file) => {
  // 这里简单模拟头像上传，实际项目中应该上传到服务器
  const reader = new FileReader()
  reader.onload = (e) => {
    tempUserInfo.value.avatar = e.target.result
  }
  reader.readAsDataURL(file.raw)
}

// 保存个人资料
const saveProfile = () => {
  // 触发更新事件
  emits('update-user-info', tempUserInfo.value)
  ElMessage.success('个人资料已更新')
  profileDialogVisible.value = false
}

// 快速预约
const emitQuickAppointment = () => {
  emits('quick-appointment')
}
</script>

<style scoped>
/* 原有样式保持不变 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  color: #333;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left .logo {
  height: 40px;
  margin-right: 10px;
}

.header-left h1 {
  font-size: 20px;
  margin: 0;
  color: #2c3e50;
}

.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.header-nav li {
  margin-right: 20px;
}

.header-nav a {
  text-decoration: none;
  color: #555;
  font-weight: bold;
  transition: color 0.3s ease;
}

.header-nav a:hover {
  color: #42b983;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}

.user-info .avatar {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  margin-right: 8px;
  object-fit: cover;
}

.user-info span {
  font-weight: bold;
}

.icons .icon {
  height: 24px;
  width: 24px;
  margin-left: 15px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.icons .icon:hover {
  transform: scale(1.1);
}

/* 新增个人设置对话框样式 */
.profile-dialog-content {
  padding: 0 20px;
}

.avatar-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader .avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.upload-tip {
  margin-top: 10px;
  font-size: 12px;
  color: #999;
}
</style>
